<template>
	<view class="outer_box">
		<scroll-view scroll-y="true" :style="{height:height+'px'}">
			<view class="product-box">
				<view class="">
					<shopTitle :content='orderInfo.shopName' color='#666666' fontSize='24rpx'></shopTitle>
				</view>
				<view class="">
					<productInfo :productInfo='item' v-for="(item,index) in orderInfo.goodSkuDto" :key="index">
						<view slot='sku'></view>
						<view slot='number-btn'></view>
					</productInfo>
				</view>
			</view>

			<view class="code-box" v-if="orderInfo.orderStatus == 1">
				<view class="code-box-v">
					<view class="title">
						<view class="code">
							<view class="">核销码</view>
							<!-- <view class="">有效期至：2022-09-19 23:59</view> -->
						</view>
						<view class="refund" @tap="jumpRefund(orderInfo)">
							<view class="">
								申请退款
							</view>
						</view>
					</view>
					<view class="line"></view>
				</view>
				<!-- 二维码 -->
				<view class="qr" v-if="orderInfo.orderStatus == 1">
					<!-- <image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/order/qr.png" mode="widthFix"></image> -->
					<canvas canvas-id="qrcode" style="width: 200px;height: 200px;" />
					<view class="">
						券码：{{orderInfo.orderNumber}}
					</view>
					<view class="">
						为保障您的权益，未到店消费前请不要将券号提供给商家
					</view>
				</view>


			</view>

			<view class="address-box">
				<view class="address-box-v">
					<view class="title">适用门店</view>
					<view class="address">
						<view class="address-info">
							<view class="">{{orderInfo.shopName}}</view>
							<view class="">{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.district}}{{orderInfo.address}}</view>
						</view>
						<view class="line-vertical">
							<view class=""></view>
						</view>
						<view class="navigation-box">
							<view class="navigation" @tap="toMapAPP(orderInfo.latitude,orderInfo.longitude,orderInfo.address)">
								<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/order/daohang.png" mode=""></image>
								<view class="">导航去</view>
							</view>
							<view class="phone">
								<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/order/dianhau.png" mode=""></image>
								<view class="">联系TA</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-box">
				<view class="order-box-v">
					<view class="order">
						<view class="">订单编号：</view>
						<view class="">{{orderInfo.orderNumber}}</view>
						<view class="">
							<view class="copy-btn" @tap="copy('orderInfo.orderNumber')">复制</view>
						</view>
					</view>
					<view class="time">
						<view class="">下单时间：</view>
						<view class="">{{orderInfo.createTime}}</view>
						<view class=""></view>
					</view>
					<view class="price">
						<view class="">订单总价：</view>
						<view class="">￥{{orderInfo.goodsPrice}}</view>
						<view class=""></view>
					</view>
					<view class="rela-price">
						<view class="">实际付款：</view>
						<view class="" style="color: #FF8308;">￥{{orderInfo.goodsPrice}}</view>
						<view class=""></view>
					</view>
				</view>

			</view>
		</scroll-view>

	</view>
</template>

<script>
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		data() {
			return {
				orderNumber:'',
				orderInfo:"",
				height: 500,
				productInfo: {
					title: '零瑕疵显微镜口腔洁牙护理套餐',
					image: 'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
					sku: '1000g',
					price: '30'
				}
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(10)
				}
			})
		},
		onLoad(parameter) {
			this.orderNumber = parameter.orderNumber
			this.getOrdersInfo(parameter.orderNumber)
		},
		onShow() {
			this.getOrdersInfo(this.orderNumber)
		},
		methods: {
			jumpRefund(item){
				uni.navigateTo({
					url:'./applyRefund?orderNumber='+item.orderNumber
				})
				// if(item.isTakes==3){//物流详情
				// 	uni.navigateTo({
				// 		url:'./refundInfo'
				// 	})
				// }else if(item.isTakes==-1){//服务详情
				// 	uni.navigateTo({
				// 		url:'./applyRefund'
				// 	})
				// }
				
			},
			toMapAPP(latitude, longitude, name) {
				console.log('进入导航')
								//  经纬度暂时写死，后面介入数据
								let latitude1 = Number('latitude');
								let longitude1 = Number('longitude');
								let address1=name;
								// 获取定位信息
								uni.getLocation({
									type: 'wgs84', //返回可以用于uni.openLocation的经纬度
									// 用户允许获取定位
									success: function(res) {
										console.log(res, '经纬度===>')
										if (res.errMsg == "getLocation:ok") {
											console.log(latitude1)
											console.log(longitude1)
											uni.openLocation({
												// 传入你要去的纬度
												latitude: latitude1,
												// 传入你要去的经度
												longitude: longitude1,
												// 传入你要去的地址信息 不填则为空
												address: address1,
												// 缩放大小
												scale: 18,
												success: function() {
													console.log('成功的回调success');
												}
											});
										}
									},
									// 用户拒绝获取定位后 再次点击触发
									fail: function(res) {
										console.log(res)
										if (res.errMsg == "getLocation:fail auth deny") {
											uni.showModal({
												content: '检测到您没打开获取信息功能权限，是否去设置打开？',
												confirmText: "确认",
												cancelText: '取消',
												success: (res) => {
													if (res.confirm) {
														uni.openSetting({
															success: (res) => {
																console.log('确定');
															}
														})
													} else {
														console.log('取消');
														return false;
													}
												}
											})
										}
									}
								});
			
			},
			async make() {
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.orderInfo.orderNumber,
					size: 200,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})
			},
			getOrdersInfo(orderNumber) {
				this.$api.getOrdersInfo({
					orderNumber: orderNumber
				}).then((res) => {
					if (res.data.success) {
						this.orderInfo = res.data.dataMap
						if(this.orderInfo.orderStatus==1){
							this.make()
						}
			
					// } else {
			
					}
			
				})
			},
			
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f8f8f8;
	}
	.outer_box{
		background-color: #f8f8f8;
	}
	.order-box {
		width: 100%;
		background: #FFFFFF;
		margin-top: 10rpx;
		padding: 30rpx 0rpx;
		display: flex;
		flex-direction: column;
		.order-box-v{
			padding: 0 20rpx;
			
			.order,
			.time,
			.rela-price,
			.price{
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
			
				view:nth-child(1) {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			
				view:nth-child(2) {
					flex: 3;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			
				view:nth-child(3) {
					flex: 0.8;
			
					.copy-btn {
						margin: 0 auto;
						width: 90rpx;
						height: 40rpx;
						background: #FFFFFF;
						border: 2rpx solid #999999;
						border-radius: 24rpx;
						font-weight: 400;
						color: #666666;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}
			
		}
	}

	.address-box {
		width: 100%;
		background: #FFFFFF;
		margin-top: 10rpx;
		padding: 30rpx 0rpx;
		display: flex;
		flex-direction: column;

		.address-box-v {
			padding: 0 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				margin-bottom: 20rpx;
			}

			.address {
				display: flex;

				.navigation-box {
					display: flex;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 10rpx;
					}

					.navigation {
						color: #FF7E51;
					}

					.phone {
						color: #FF5551;
					}

					.navigation,
					.phone {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 24rpx;
					}

				}

				.line-vertical {
					display: flex;
					align-items: center;

					view:nth-child(1) {
						height: 60rpx;
						width: 1rpx;
						background-color: #CCCCCC;

					}
				}

				.address-info {
					flex: 40;

					view:nth-child(1) {
						font-weight: bold;
						color: #333333;
					}

					view:nth-child(2) {
						font-weight: 400;
						color: #888888;
						margin-top: 10rpx;
					}
				}

				view:nth-child(2) {
					flex: 5;
				}

				.navigation-box {
					flex: 20;
				}

			}
		}


	}

	.code-box {
		width: 100%;
		background: #FFFFFF;
		margin-top: 10rpx;
		padding: 30rpx 0;

		.qr {
			display: flex;
			flex-direction: column;
			align-items: center;

			view:nth-child(2) {
				margin-top: 20rpx;
				color: #333333;
				font-size: 28rpx;
			}

			view:nth-child(3) {
				margin-top: 20rpx;
				color: #666666;
				font-size: 24rpx;
			}

			image {
				width: 300rpx;
			}
		}

		.code-box-v {
			padding: 0 20rpx;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color: #eee;
			margin: 30rpx 0;
		}

		.title {
			display: flex;
			align-items: center;

			.code {
				flex: 3;

				view:first-child {
					color: #000000;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;

				}

				view:last-child {
					color: #999999;
					font-size: 24rpx;

				}
			}

			.refund {
				flex: 1;

				view {
					width: 140rpx;
					height: 50rpx;
					background: #FFFFFF;
					border: 2rpx solid #999999;
					border-radius: 50rpx;
					font-size: 26rpx;
					line-height: 50rpx;
					text-align: center;
					color: #666666;
				}
			}
		}
	}

	.product-box {
		width: 100%;
		min-height: 100rpx;
		background: #FFFFFF;

		view {
			padding: 10rpx;
		}
	}
</style>
